<template>
  <el-row>
    <el-col :span="8" :offset="8">
      <div class="div1">
        <el-card>
          <h1 style="text-align: center">欢迎使用宿舍管理系统</h1>
          <el-form
            :rules="rules"
            ref="loginForm"
            :model="form"
            style="text-align: center"
          >
            <el-form-item prop="account">
              <el-input v-model="form.account" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="form.password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="type">
              <el-radio-group v-model="form.type">
                <el-radio label="0">系统管理员</el-radio>
                <el-radio label="1">宿舍管理员</el-radio>
                <el-radio label="2">学生</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="rem">
              <el-checkbox-group v-model="form.rem">
                <el-checkbox true-label="1" false-label="0"
                  >记住密码</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">登录</el-button>
              <el-button @click="onReset()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import loginApi from "../http/loginApi";

export default {
  data() {
    return {
      form: {
        account: 'admin',
        password: '123',
        type: '0',
        rem: '0'
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }]
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('submit!');
      console.log(this.$refs['loginForm']);
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          alert('submit!');
          //发起登录请求
          loginApi.login(this.form).then(res => {
            if (res.data.code == 200){
              //登陆成功
              //修改vuex中的store变量type中的值
              // this.$store.commit('SET_TYPE', this.form.type);
              // this.$store.commit('SET_USERINFO', {id:1});
              sessionStorage.setItem("token",res.data.token);
              //跳转到Home页面
              this.$router.replace('/home');
            }else{
              this.$message.error(res.data.msg);
            }
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onReset() {
      this.$refs['loginForm'].resetFields();
    }
  }
};
</script>

<style scoped></style>
